@{
    ViewData["Title"] = "添加销售出库单";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" />
    <style>
        body { 
            padding: 20px; 
            background: #f8f9fa; 
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .form-container {
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 30px;
        }
        .form-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .layui-form-label { 
            width: 110px; 
            text-align: right;
            font-weight: 500;
        }
        .layui-input-block { 
            margin-left: 140px; 
        }
        .layui-form-text .layui-input-block { 
            margin-left: 140px; 
        }
        .required { 
            color: #ff5722; 
            margin-right: 3px;
        }
        .layui-input, .layui-textarea, .layui-select {
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            transition: border-color 0.3s;
        }
        .layui-input:focus, .layui-textarea:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
        }
        .switch-container {
            display: flex;
            align-items: center;
            height: 38px;
            background: #f8f9fa;
            border-radius: 4px;
            padding: 0 12px;
            border: 1px solid #e6e6e6;
        }
        .btn-container {
            text-align: center;
            margin-top: 35px;
            padding-top: 25px;
            border-top: 1px solid #f0f0f0;
        }
        .layui-btn {
            border-radius: 4px;
            padding: 0 25px;
            height: 38px;
            line-height: 38px;
        }
        .layui-input-group {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            width: 100%;
        }
        .layui-input-group .layui-input {
            flex: 1;
            border-radius: 4px 0 0 4px !important;
            border-right: none;
        }
        .layui-input-suffix {
            display: flex;
            align-items: center;
        }
        .layui-input-suffix .layui-btn {
            border-radius: 0 4px 4px 0 !important;
            border-left: none;
            margin: 0;
            padding: 0 12px;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="form-title">添加销售出库单</div>
        <form class="layui-form" lay-filter="addForm" id="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>出库单编号
                </label>
                <div class="layui-input-block">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <input type="text" name="saleCode" placeholder="请输入出库单编号" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                        <div class="layui-col-md4" style="padding-left: 10px;">
                            <div class="switch-container">
                                <input type="checkbox" name="autoGenerate" title="自动生成" lay-skin="switch" lay-filter="autoGenerate">
                                <span style="margin-left: 10px; color: #666; font-size: 12px;">自动生成</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>出库单名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="saleName" placeholder="请输入出库单名称" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">销售订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="salesOrders" placeholder="请输入销售订单编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>客户编码
                </label>
                <div class="layui-input-block">
                    <div class="layui-input-group">
                        <input type="text" name="customerCode" placeholder="请输入客户编码" autocomplete="off" class="layui-input" lay-verify="required" style="border-radius: 4px 0 0 4px;">
                        <div class="layui-input-suffix">
                            <button type="button" class="layui-btn layui-btn-primary" id="selectCustomer" style="border-radius: 0 4px 4px 0;">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="customerName" placeholder="客户名称将自动填入" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>出库日期
                </label>
                <div class="layui-input-block">
                    <input type="text" name="saleDate" placeholder="请选择出库日期" autocomplete="off" class="layui-input" lay-verify="required" id="saleDate">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>单据状态
                </label>
                <div class="layui-input-block">
                    <select name="state" lay-verify="required">
                        <option value="">请选择状态</option>
                        <option value="0" selected>草稿</option>
                        <option value="1">已完成</option>
                    </select>
                </div>
            </div>
            <div class="btn-container">
                <button class="layui-btn layui-btn-lg" lay-submit lay-filter="save">
                    <i class="layui-icon layui-icon-ok"></i> 保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" id="cancelBtn" style="margin-left: 20px;">
                    <i class="layui-icon layui-icon-close"></i> 取消
                </button>
            </div>
        </form>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'laydate', 'layer', 'util', 'table'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var util = layui.util;
            var table = layui.table;

            // 初始化日期选择器
            laydate.render({
                elem: '#saleDate',
                type: 'date',
                value: new Date(),
                theme: '#1890ff'
            });

            // 自动生成编号开关
            form.on('switch(autoGenerate)', function (data) {
                if (data.elem.checked) {
                    // 生成自动编号
                    var now = new Date();
                    var year = now.getFullYear();
                    var month = String(now.getMonth() + 1).padStart(2, '0');
                    var day = String(now.getDate()).padStart(2, '0');
                    var time = String(now.getHours()).padStart(2, '0') + String(now.getMinutes()).padStart(2, '0');
                    var autoCode = 'PS' + year + month + day + time;
                    $('input[name="saleCode"]').val(autoCode).prop('readonly', true);
                } else {
                    $('input[name="saleCode"]').val('').prop('readonly', false);
                }
            });

            // 选择客户按钮
            $('#selectCustomer').on('click', function () {
                layer.open({
                    type: 1,
                    title: '选择客户',
                    area: ['900px', '600px'],
                    content: '<div id="customerSelectModal" style="padding: 20px;">' +
                            '<form class="layui-form" lay-filter="customerSearchForm" style="margin-bottom: 15px;">' +
                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label" style="width: 80px;">客户名称</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text" name="CustomerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input">' +
                            '</div>' +
                            '</div>' +
                            '<div class="layui-inline">' +
                            '<button class="layui-btn" lay-submit lay-filter="customerSearchBtn">' +
                            '<i class="layui-icon layui-icon-search"></i> 搜索' +
                            '</button>' +
                            '<button type="reset" class="layui-btn layui-btn-primary">重置</button>' +
                            '</div>' +
                            '</div>' +
                            '</form>' +
                            '<table id="customerSelectTable" lay-filter="customerSelectTable"></table>' +
                            '</div>',
                    success: function(layero, index) {
                        // 初始化客户选择表格
                        var customerTable = table.render({
                            elem: '#customerSelectTable',
                            url: '/Customer/ShowCustomer',
                            page: true,
                            height: 400,
                            request: {
                                pageName: 'pageIndex',
                                limitName: 'pageSize'
                            },
                            cols: [[
                                {field: 'customerCode', title: '客户编码', width: 150},
                                {field: 'customerName', title: '客户名称', width: 200},
                                {field: 'customerType', title: '客户类型', width: 120},
                                {field: 'customerPhone', title: '联系电话', width: 150},
                                {field: 'isEnable', title: '状态', width: 100, templet: function(d){
                                    return d.isEnable === true ? '<span style="color: green;">启用</span>' : '<span style="color: red;">禁用</span>';
                                }},
                                {title: '操作', width: 100, templet: function(d) {
                                    return '<button class="layui-btn layui-btn-xs" onclick="selectThisCustomer(\'' + 
                                           d.customerCode + '\', \'' + d.customerName + '\', ' + index + ')">选择</button>';
                                }}
                            ]],
                            text: {
                                none: '暂无客户数据'
                            }
                        });

                        // 客户搜索功能
                        form.on('submit(customerSearchBtn)', function(data) {
                            customerTable.reload({
                                where: data.field
                            });
                            return false;
                        });

                        // 重置搜索
                        $(layero).find('button[type="reset"]').on('click', function() {
                            customerTable.reload({
                                where: {}
                            });
                        });
                    }
                });
            });

            // 表单验证规则
            form.verify({
                required: function(value, item) {
                    if(!value) {
                        return '此项为必填项';
                    }
                }
            });

            // 提交表单
            form.on('submit(save)', function (data) {
                var submitData = data.field;
                
                // 转换日期格式
                if (submitData.saleDate) {
                    submitData.saleDate = new Date(submitData.saleDate).toISOString();
                }
                
                // 转换状态为数字
                submitData.state = parseInt(submitData.state);

                var loadingIndex = layer.load(2, { content: '正在保存...' });
                
                $.ajax({
                    url: '/Sale/AddSale',
                    type: 'POST',
                    data: submitData,
                    success: function (result) {
                        layer.close(loadingIndex);
                        if (result > 0) {
                            layer.msg('添加成功', { icon: 1, time: 1500 }, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg('添加失败，请重试', { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.close(loadingIndex);
                        layer.msg('操作失败，请检查网络连接', { icon: 2 });
                    }
                });
                return false;
            });

            // 取消按钮
            $('#cancelBtn').on('click', function () {
                layer.confirm('确定要取消吗？未保存的数据将丢失', { icon: 3, title: '确认取消' }, function(index) {
                    layer.close(index);
                    var frameIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(frameIndex);
                });
            });

            // 默认触发自动生成
            setTimeout(function() {
                $('input[name="autoGenerate"]').click();
            }, 100);
        });

        // 选择具体客户的全局函数
        window.selectThisCustomer = function(customerCode, customerName, modalIndex) {
            // 将选中的客户信息填入表单
            $('input[name="customerCode"]').val(customerCode);
            $('input[name="customerName"]').val(customerName);
            
            // 关闭弹窗
            layer.close(modalIndex);
            
            // 提示选择成功
            layer.msg('客户选择成功：' + customerName, {icon: 1});
        };
    </script>
</body>
</html> 